<template>
  <view class="transaction-password-wrap">
	  <view class="topVue">
	  	<view class="status"></view>
	  	<view class="navVue">
	  		<image src="../../static/imgs/back.png" style="width: 36rpx; height: 36rpx;" @click="backFun"></image>
	  		<view class="nav-title">{{$t("交易密码")}}</view>
	  		<view style="width: 36rpx; height: 36rpx;"></view>	
	  	</view>
	  </view>
	  
	  <view class="place"></view>
    
    <view class="title"> {{$t('设置新交易密码')}} </view>
    <view class="form-box">
      <u--form labelPosition="left" :model="form" :rules="rules" ref="uForm">
        <u-form-item label="" prop="newTradePwd" borderBottom ref="item1">
          <u--input :placeholder="$t('请输入交易密码')" v-model="form.newTradePwd" border="none"></u--input>
        </u-form-item>
        <u-form-item label="" prop="reNewTradePwd" borderBottom ref="item1">
          <u--input :placeholder="$t('请再次输入新交易密码')" v-model="form.reNewTradePwd" border="none"></u--input>
        </u-form-item>
      </u--form>
      <view class="btn-box">
        <u-button @click="submit" class="submit-btn">{{$t('保存')}}</u-button>
      </view>
    </view>
  </view>
</template>

<script>
  export default {
    data() {
      return {
        currentAccount: "",
        form: {
          newTradePwd: "",
          reNewTradePwd: "",
        },
        userInfo: {},
        // rules: {
        //   newTradePwd: {
        //     required: true,
        //     message: this.$t("请输入交易密码"),
        //     trigger: ["blur", "change"],
        //   },
        //   reNewTradePwd: {
        //     required: true,
        //     message: this.$t("请再次输入新交易密码"),
        //     trigger: ["blur", "change"],
        //   },
        // },
      };
    },
    computed: {
      rules() {
        return {
          newTradePwd: {
            required: true,
            message: this.$t("请输入交易密码"),
            trigger: ["blur", "change"],
          },
          reNewTradePwd: {
            required: true,
            message: this.$t("请再次输入新交易密码"),
            trigger: ["blur", "change"],
          },
        }
      }
    },
    methods: {
		backFun() {
			uni.navigateBack({
				delta: 1
			})
		},
      submit() {
        this.$refs.uForm
          .validate()
          .then((res) => {
            this.$http
              .post(
                `/front/changeTradePwd?newTradePwd=${this.form.newTradePwd}&reNewTradePwd=${this.form.reNewTradePwd}`
              )
              .then((res) => {
                if (res.code === 0) {
                  uni.$u.toast(this.$t("修改交易密码成功") + '！');
                  // 返回上一个页面
                  uni.navigateBack({
                    delta: 1,
                  });
                }
              })
              .catch((err) => {
                console.error(err);
              });
          })
          .catch((errors) => {
            uni.$u.toast(this.$t("校验失败"));
          });
      },
      getUserBaseInfo() {
        this.$http
          .post(`/front/user/baseInfo`)
          .then((res) => {
            if (res) {
              this.userInfo = res.obj.user;
            }
          })
          .catch((err) => {
            console.error(err);
          });
      },
    },
    onShow() {
      this.getUserBaseInfo();
    },
  };
</script>

<style lang="scss" scoped>
  .transaction-password-wrap {
   width: 100%;
   height: 100%;
   background: url("../../static/imgs/bg.png") no-repeat;
   background-size: 100% 100%;
   box-sizing: border-box;
   position: fixed;
   
   .place {
   	height: calc(var(--status-bar-height) + 92rpx);
   }
   
   .topVue {
   	width: 100%;
   	position: absolute;
   	left: 0;
   	top: 0;
   	z-index: 99;
   
   	.status {
   		width: 100%;
   		height: var(--status-bar-height);
   	}
   
   	.navVue {
   		width: 100%;
   		height: 92rpx;
   		background: linear-gradient(to right, #FFFBFF, #FFE7F4);
   		display: flex;
   		justify-content: space-between;
   		align-items: center;
   		box-sizing: border-box;
   		padding: 0 30rpx;
   
   		.nav-title {
   			width: 420rpx;
   			height: 92rpx;
   			font-size: 36rpx;
   			color: #04094C;
   			text-align: center;
   			line-height: 92rpx;
   		}
   	}
   }

    .current-account-box {
      width: 100%;
      height: 36rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      font-family: PingFang SC;

      .label {
        font-size: $uni-font-size-36;
        color: $uni-text-color-inverse;
        font-weight: bold;
      }

      .value {
        color: $uni-text-color-grey;
        font-weight: 400;
        font-size: $uni-font-size-32;
      }
    }

    
    .title {
      width: 100%;
      height: 30rpx;
      font-size: $uni-font-size-30;
      font-family: PingFang SC;
      font-weight: bold;
      color: #333;
      padding: 30rpx;
    }
    
    .form-box {
      width: 690rpx;
      height: 100%;
      margin: 30rpx auto;
    }

    .btn-box {
      position: fixed;
      bottom: 50rpx;
      left: 0;
      width: 100%;
      height: 90rpx;
      box-sizing: border-box;
      padding: 0 25rpx;
    }

    .u-form-item {
      width: 100%;
      height: 90rpx;
      margin-bottom: 30rpx;

      /deep/ .u-line {
        display: none;
      }

      /deep/ .u-form-item__body,
      /deep/ .u-form-item__body__right__content__slot,
      /deep/ .u-input,
      /deep/ .u-input__content,
      /deep/ .u-input__content__field-wrapper,
      /deep/ .u-input__content__field-wrapper__field,
      /deep/ .uni-input-input {
        height: 100%;
        padding: 0;
        // background: $uni-content-bg-color;
        border-radius: 20rpx;
      }

      /deep/ .uni-input-input {
        padding: 0 25rpx;
        box-sizing: border-box;
        font-size: $uni-font-size-26;
        font-family: PingFang SC;
        font-weight: 300;
        color: $uni-text-color-grey;
      }

      /deep/ .uni-input-placeholder {
        padding: 0 27rpx;
      }

      /deep/ .u-input {
        background: #fff;
      }
    }

    .u-button {
      width: 100%;
      height: 100%;
      background: #D55B94;
      border-radius: 20rpx;
      color: $uni-bg-color;
      font-size: $uni-font-size-30;
      font-family: PingFang SC;
      font-weight: 400;
      border: none;
    }
  }
</style>